import React, { Component, Suspense } from 'react';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';

import { connect } from 'dva';
import { routerRedux } from 'dva/router';
import PageLoading from '@/components/PageLoading';
import { FormattedMessage } from 'umi-plugin-react/locale';
import {
  Row,
  Col,
  Card,
  Icon,
  Tooltip,
  Form,
  Button,
  Progress,
  Tabs,
  Badge,
  Spin,
  message,
} from 'antd';
import styles from './twoIndex.less';
import bulb from '@/assets/medicalKnowledge/灯泡.png';
import SimilarAsk from './similarAsk';
import AbnormalQ from './abnormalQ';

import bj from '@/assets/medicalKnowledge/bj-c.png';
const bgBround = {
  background: 'url(' + bj + ')',
  width: '100%',
  height: '100%',
  backgroundSize: '100% 100%',
};
const { TabPane } = Tabs;

class MedicalKnowledge extends Component {
  constructor(props) {
    super(props);
    this.state = {
      taskId: '',
      leName: 0,
      xsName: 0,
      ProgressQH: false,
      ProgressWZ: false,
      totala: 0,
      totalb: 0,
      ProgressName: 1,
      checkTime: '',
      text5: '',
      text6: '',
      logins: false,
    };
  }

  componentDidMount() {
    // this.similarAskList()
    // this.timeB()
    this.fetch();
  }

  fetch = () => {
    this.setState({ logins: true });
    const { dispatch, currentUser } = this.props;
    this.reqRef = requestAnimationFrame(() => {
      dispatch({
        type: 'medicalKnowledge/getTaskInfo',
        payload: {},
        callback: res => {
          this.setState({ logins: false, taskId: res.id });
          if (res.status === 1) {
            this.physical();
          }
          if (res.status === 2) {
            this.timeB();
          }
          if (res.status === 0) {
            this.physical();
          }
        },
      });
    });
  };

  timeB = () => {
    let { leName, taskId } = this.state;
    setTimeout(() => {
      const { dispatch, currentUser } = this.props;
      this.reqRef = requestAnimationFrame(() => {
        dispatch({
          type: 'medicalKnowledge/knowledgeExamineCheckProcess',
          payload: {
            taskId: taskId,
          },
          callback: res => {
            leName = res.data; // 联调打开
            if (res.data == 100) {
              this.setState({ leName: 100 }, () => {
                setTimeout(() => {
                  this.physical();
                }, 1000);
              });
            } else if (res.data == 0) {
              this.setState({ ProgressName: 3 }, () => {
                this.timeB();
              });
            } else {
              this.setState({ ProgressName: 3 });
              const number = res.data;
              this.setState({ leName: number }, () => {
                setTimeout(() => {
                  this.setState({}, () => {
                    this.timeB();
                  });
                }, 1000);
              });
            }
          },
        });
      });
    }, 1000);
  };

  // 获取体检数据  knowledgeExamineCheckStatus
  physical = () => {
    const { dispatch, currentUser } = this.props;
    this.reqRef = requestAnimationFrame(() => {
      dispatch({
        type: 'medicalKnowledge/fetch',
        payload: {},
        callback: res => {
          this.setState({
            leName: res.score,
            checkTime: res.checkTime,
            text5: `有${res.resList[2].count}个未知问题`,
            text6: `知识库平均相似问为${res.resList[3].count}个`,
            ProgressName: 1,
          });
        },
      });
    });
  };

  detectiona = () => {
    // 重新扫描
    this.setState({ ProgressName: 2 });
  };

  detection = () => {
    // 开始扫描
    this.setState({ leName: 0 }, () => {
      const { dispatch, currentUser } = this.props;
      this.reqRef = requestAnimationFrame(() => {
        dispatch({
          type: 'medicalKnowledge/retest',
          payload: {},
          callback: res => {
            if (res.status) {
              this.setState({ ProgressName: 3, taskId: res.id }, () => {
                this.timeB();
              });
            } else {
              message.error('训练服务器异常，请检查训练服务器配置');
            }
          },
        });
      });
    });
  };

  time = () => {
    let { leName } = this.state;
    setTimeout(() => {
      leName = leName + 1;
      this.setState({ leName }, () => {
        if (leName < 101) {
          this.time();
        } else {
          this.setState({ ProgressName: 1 });
        }
      });
    }, 50);
  };

  callback = key => {};

  totala1 = a => {
    this.setState({ totala: a });
  };

  totala2 = a => {
    this.setState({ totalb: a });
  };

  render() {
    return (
      <Suspense fallback={<PageLoading />}>
        <PageHeaderWrapper>
          <Spin spinning={this.state.logins}>
            <Row className="paddingCard" style={{ height: 262 }} span={24}>
              <Card bordered={false} style={{ borderRadius: 5 }}>
                <Card className={styles.backimg} style={bgBround} bordered={false}>
                  {this.state.ProgressName === 1 ? (
                    <div style={{ marginTop: 0, height: 150 }} className={styles.composings}>
                      <div style={{ flexBasis: '10%' }}></div>
                      <div style={{ flexBasis: '10%', marginTop: 35 }}>
                        <Icon style={{ fontSize: 73, color: '#f1a500' }} type="check" />
                      </div>
                      <div style={{ flexBasis: '2%' }}></div>
                      <div style={{ flexBasis: '40%', marginTop: 50 }}>
                        <p style={{ marginBottom: 0, color: '#000' }}>扫描完成</p>
                        <p style={{ marginBottom: 0, color: '#000' }}>
                          {`体检时间:${this.state.checkTime}`}{' '}
                          <span
                            style={{ color: '#f2b242' }}
                          >{`${this.state.text6}，${this.state.text5}`}</span>
                        </p>
                      </div>
                      <div style={{ flexBasis: '10%' }}></div>
                      <div className="progressColor" style={{ marginTop: 40 }}>
                        <div onClick={this.detectiona} className={styles.buttons}>
                          重新扫描
                        </div>
                      </div>
                    </div>
                  ) : null}
                  {this.state.ProgressName === 2 ? (
                    <div style={{ marginTop: 0, height: 150 }} className={styles.composings}>
                      <div style={{ flexBasis: '10%' }}></div>
                      <div style={{ flexBasis: '10%', marginTop: 30 }}>
                        <img src={bulb} alt="" />
                      </div>
                      <div style={{ flexBasis: '3%' }}></div>
                      <div style={{ flexBasis: '40%', marginTop: 50 }}>
                        <p style={{ marginBottom: 0, color: '#000' }}>
                          定期扫描清理知识库中相似问的问题、不同问题之间相似的问题以及同一问题中的异常问法,能够让机器人对的理解更清楚，回答更准确
                        </p>
                      </div>
                      <div style={{ flexBasis: '10%' }}></div>
                      <div className="progressColor" style={{ marginTop: 40 }}>
                        <div onClick={this.detection} className={styles.buttons}>
                          开始扫描
                        </div>
                      </div>
                    </div>
                  ) : null}
                  {this.state.ProgressName === 3 ? (
                    <div style={{ marginTop: 0, height: 150 }} className={styles.composings}>
                      <div style={{ flexBasis: '10%' }}></div>
                      <div style={{ flexBasis: '10%', marginTop: 10 }}>
                        <Progress
                          className="ycolortwo"
                          strokeColor="#f1a500"
                          type="circle"
                          percent={this.state.leName}
                          strokeWidth={5}
                          width={135}
                          // strokeWidth={6}
                        />
                      </div>
                      <div style={{ flexBasis: '2%' }}></div>
                      <div style={{ flexBasis: '40%', marginTop: 50 }}>
                        <div style={{ marginBottom: 0 }} className={styles.center}>
                          <span>知识库体检中</span>
                          <span className={styles.loading}></span>
                        </div>
                        <p style={{ marginBottom: 0, color: '#000' }}>
                          您可以关掉页面，稍后再来查看
                        </p>
                      </div>
                      <div style={{ flexBasis: '10%' }}></div>
                      <div className="progressColor" style={{ marginTop: 40 }}></div>
                    </div>
                  ) : null}
                </Card>
              </Card>
              <div style={{ height: 24 }}></div>
              <Row>
                <Card bordered={false}>
                  <div className="tabYs">
                    <Tabs defaultActiveKey={this.props.location.query.id} onChange={this.callback}>
                      <TabPane forceRender={true} tab={`相似问法(${this.state.totala})`} key="1">
                        <SimilarAsk
                          ProgressName={this.state.ProgressName}
                          total={this.state.totala}
                          totala1={this.totala1}
                        />
                      </TabPane>
                      <TabPane forceRender={true} tab={`异常问法(${this.state.totalb})`} key="2">
                        <AbnormalQ ProgressName={this.state.ProgressName} totala2={this.totala2} />
                      </TabPane>
                    </Tabs>
                  </div>
                </Card>
              </Row>
            </Row>
          </Spin>
        </PageHeaderWrapper>
      </Suspense>
    );
  }
}

export default connect(({ user }) => ({
  // 全局数据
  currentUser: user.currentUser,
}))(Form.create()(MedicalKnowledge));
